<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二手车信息查询</title>
		<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<link rel="stylesheet" href="bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css" />

		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/jquery.js"></script>
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<script type="text/javascript" src="bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript" src="bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>>
		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/common.js"></script>

		<style>
			.condition {
				margin-top: 20px;
			}

			.condition>label {
				width: 100px;
				text-align: center;
			}

			.condition>ul {
				list-style: none;
				display: inline-block;
			}

			.condition>ul>li {
				display: inline-block;
				width: 100px;
				font-size: 18px;
				text-align: center;
				cursor: pointer;
			}

			.condition>ul>li.active {
				border: 2px solid #449d44;
			}

			.condition>ul>li:hover {
				border: 2px solid #449d44;
			}

			.car-list {
				margin: 20px;
			}

			.car-info {
				display: inline-block;
				width: 19%;
				cursor: pointer;
				margin-top: 10px;
			}

			.operation>img {
				width: 25px;
				cursor: pointer;
				margin-left: 10px;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div class="page-header">
				<h3>二手车信息查询</h3>
			</div>
			<div class="form-inline">
				<input v-model="keyWord" id="keyWord" type="search" class="form-control" placeholder="请输入品牌或车型进行搜索" />
				<button @click="search" id="search" class="btn btn-success">搜索</button>
			</div>
			<div class="car-brand condition">
				<label>
					品牌
				</label>
				<ul>
					<li @click="changeBrand(brand.id,index)" :class="index==curBrandIndex?'active':''" v-for="(brand,index) in brandList">{{brand.name}}</li>
				</ul>
			</div>
			<div class="car-type condition">
				<label>
					车型
				</label>
				<ul>
					<li @click="changeType(type.id,type.brandId,index)" v-for="(type,index) in typeList" :class="index==curTypeIndex?'active':''">{{type.name}}</li>
				</ul>
			</div>
			<div class="car-price condition">
				<label>
					价格
				</label>
				<ul>
					<li @click="changePrice(price.id,index)" v-for="(price,index) in priceList" :class="index==curPriceIndex?'active':''">{{price.desc}}</li>
				</ul>
			</div>
			<div class="car-date condition">
				<label>
					上牌日期
				</label>
				<input type="text" id="beginDate" /> ~
				<input type="text" id="endDate" />
			</div>
			<div class="car-list">
				<div class="car-info" v-for="car in carList">
					<img :src="'carimages/'+car.carImage" width="300px" height="250px" />
					<div class="bs-example">
						<h4>{{car.name}}</h4>
					</div>
					<div class="bs-example">
						<h4>里程数：{{car.mileage}}万公里</h4>
					</div>
					<div class="bs-example">
						<h4>价格：{{car.price}}万元</h4>
					</div>
					<div class="bs-example">
						<h4>发布时间：{{car.publishDate}}</h4>
					</div>
					<div class="operation">
						<img class="addCollect" :src="isCollect(car.id)?'imgs/heart-full.png':'imgs/heart-empty.png'" title="加入收藏" @click="collectOrCancel(car.id)" />
						<img src="imgs/add-compare.png" title="加入对比" />
						<img src="imgs/buy.png" title="购买" class="buy" />
					</div>
				</div>
			</div>
			<span v-if="total==0" id="empty-result" style="color: red;">暂无符合条件的记录</span>
			<!--分页栏-->
			<div class="text-center">
				<ul class="pagination">
					<li :class="pageNo==i?'active':''" v-for="i in pageCount">
						<a @click="changePage(i)" href="javascript:void(0);">{{i}}</a>
					</li>
				</ul>
			</div>
		</div>

	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				brandList: [],
				curBrandIndex: 0,
				curBrandId: 0,
				typeList: [],
				curTypeIndex: 0,
				curTypeId: 0,
				priceList: [],
				curPriceId: 0,
				curPriceIndex: 0,
				beginDateMills: undefined,
				endDateMills: undefined,
				keyWord: "",
				pageNo: 1,
				total: 0,
				pageCount: 0,
				carList: [],
				params: {},
				//当前用户收藏的车辆Id
				collectIds:[]
			},
			methods: {
				//读取所有品牌信息
				loadAllBrands() {
					var _this = this;
					//动态获取并绑定所有的品牌信息
					axios.get("/brands/all").then(function(res) {
						let data = res.data;
						if (data.success) {
							_this.brandList = data.data
						}
					});
				},
				//读取所有价格信息
				loadAllPrices() {
					var _this = this;
					axios.get("/priceRanges/all").then(function(res) {
						let data = res.data;
						if (data.success) {
							_this.priceList = data.data;
						}
					});
				},

				//根据品牌编号加载车型
				loadTypeByBrandId(brandId) {
					var _this = this;
					axios.get("/types/getByBrandId?brandId=" + brandId).then(function(res) {
						let data = res.data;
						if (data.success) {
							_this.typeList = data.data;
						}
					});
				},
				//加载分页栏信息
				loadPageBar(page) {
					this.pageCount = page.pageCount;
					this.pageNo = 1;
				},
				//条件改变时重回第一页
				selectFirstPage() {
					this.pageNo = 1;
				},
				//获取当前所有的条件参数信息
				getParams() {
					//页面刚加载的时候获取条件信息
					var conditions = localStorage.getItem("conditions");
					//如果有条件，则第一次查询时候的参数就为localStorage中的参数
					var params = {};
					if (conditions) {
						params = JSON.parse(conditions);
					} else {
						params = {
							keyWord: "",
							brandId: 0,
							curBrandIndex: 0,
							typeId: 0,
							curTypeIndex: 0,
							priceId: 0,
							curPriceIndex: 0,
							startDate: "",
							endDate: "",
							pageNo: 1
						}
					}
					return params;
				},
				//保存条件信息
				saveConditionParams() {
					var _this = this;
					var params = {
						keyWord: _this.keyWord,
						brandId: _this.curBrandId,
						curBrandIndex: _this.curBrandIndex,
						typeId: _this.curTypeId,
						curTypeIndex: _this.curTypeIndex,
						priceId: _this.curPriceId,
						curPriceIndex: _this.curPriceIndex,
						startDate: $("#beginDate").val(),
						endDate: $("#endDate").val(),
						pageNo: _this.pageNo
					};
					//每次发生切换的时候都将当前的参数保存到localstorage中
					localStorage.setItem("conditions", JSON.stringify(params));
				},
				//当条件发生变化时要执行的操作
				changeCondition() {
					//条件改变时重回第一页
					this.selectFirstPage();
					//保存条件信息
					this.saveConditionParams();
					//查询车辆信息
					this.loadCarInfo();
				},
				//查询车辆信息
				loadCarInfo(changeByPage) {
					var _this = this;
					//通过getParams方法获取到的数据格式是一个JSON对象
					//使用Qs工具将其转换为k1=v1&k2=v2这样的查询字符串形式
					var searchStr = Qs.stringify(_this.getParams());
					axios.get("/cars/searchByConditions?" + searchStr).then(function(res) {
						let data = res.data;
						if (data.success) {
							var page = data.data;
							_this.total = page.total;
							_this.carList = page.data;
							//如果是通过切换页码实现的数据刷新，此时不要进行分页栏的刷新操作
							if (changeByPage == undefined) {
								//刷新分页栏信息
								_this.loadPageBar(data.data);
							}
						}
					});
				},

				//为品牌信息绑定点击事件
				changeBrand(brandId, index) {
					//根据点击的品牌加载所有的车型
					this.loadTypeByBrandId(brandId);
					//设置当前选中的品牌为点击的品牌
					this.curBrandIndex = index;
					this.curBrandId = brandId;
					//将车型设置为全部
					this.curTypeIndex = 0;
					this.curTypeId = 0;
					this.changeCondition();
				},
				//为车型信息绑定点击事件
				changeType(typeId, brandId, index) {
					this.curTypeIndex = index;
					this.curTypeId = typeId;
					this.changeCondition();
				},
				//为价格区间绑定点击事件
				changePrice(priceId, index) {
					this.curPriceId = priceId;
					this.curPriceIndex = index;
					this.changeCondition();
				},
				//搜索按钮
				search() {
					this.changeCondition();
				},
				//页码切换
				changePage(pageNo) {
					this.pageNo = pageNo;
					this.saveConditionParams();
					this.loadCarInfo(true);
				},
				//加载所有收藏车辆的Id
				loadAllCollectIds(){
					let _this=this;
					axios.get("/collect/getByUserId").then(function(res){
						let data=res.data;
						_this.collectIds=data.data;
					});
				},
				isCollect(carId){
					if(!this.collectIds){
						return false;
					}else{
						return this.collectIds.includes(carId);
					}
					
				},
				//收藏或取消收藏
				collectOrCancel(carId) {
					var _this=this;
					axios.post("/collect/addOrCancel", {
						carId: carId
					}, _this.formSubmitConfig).then(function(res) {
						let data = res.data;
						if(!data.success){
							alert(data.errMsg);
						}else{
							//如果是收藏或者取消收藏操作成功
							//则对上面定义的收藏Id数组的内容进行操作
							if(data.data==1){
								_this.collectIds.push(carId);
							}
							if(data.data==0){
								let collectIds=_this.collectIds;
								let idx=collectIds.indexOf(carId);
								collectIds.splice(idx,1);
								_this.collectIds=collectIds;
							}
						}
					});
				}

			},
			mounted() {
				var _this = this;
				//加载所有品牌信息
				_this.loadAllBrands();
				//页面刚加载加载默认全部车型
				_this.loadTypeByBrandId(0);
				//动态获取并绑定价格信息
				_this.loadAllPrices();
				//加载所有收藏车辆的Id
				_this.loadAllCollectIds();
				//加载时间选择组件
				$('#beginDate').datetimepicker({
					format: "yyyy-mm-dd",
					autoclose: true,
					minView: "month"
				}).on('changeDate', function(ev) {
					var mills = ev.date.valueOf();
					_this.beginDateMills = new Date(new Date(ev.date.valueOf()).format('yyyy-MM-dd', mills))
						.getTime();
					//当两个输入框值都不为空时，校验两者的时间早晚
					var beginDate = $.trim($("#beginDate").val());
					var endDate = $.trim($("#endDate").val());
					if ((beginDate.length != 0 && endDate.length != 0) && (_this.endDateMills < _this
							.beginDateMills)) {
						$("#beginDate").val("");
						_this.beginDateMills = undefined;
						alert("起始时间不能晚于结束时间");
					} else {
						_this.changeCondition();
					}
				});
				$('#endDate').datetimepicker({
					format: "yyyy-mm-dd",
					autoclose: true,
					minView: "month"
				}).on('changeDate', function(ev) {
					var mills = ev.date.valueOf();
					_this.endDateMills = new Date(new Date(ev.date.valueOf()).format('yyyy-MM-dd', mills))
						.getTime();
					if ((beginDate.length != 0 && endDate.length != 0) && (_this.endDateMills < _this
							.beginDateMills)) {
						$("#endDate").val("");
						_this.endDateMills = undefined;
						alert("起始时间不能晚于结束时间");
					} else {
						_this.changeCondition();
					}
				});
				var params = this.getParams();
				//根据默认或之前保存的条件去加载车辆信息
				this.loadCarInfo();
				//设置页面刚加载时选中状态和一些默认值
				this.curBrandId = params.brandId;
				this.curBrandIndex = params.curBrandIndex;
				this.curTypeId = params.typeId;
				this.curTypeIndex = params.curTypeIndex;
				this.curPriceId = params.priceId;
				this.curPriceIndex = params.curPriceIndex;
				this.beginDateMills = new Date(params.startDate).getTime();
				this.endDateMills = new Date(params.endDate).getTime();
				$('#beginDate').val(params.startDate);
				$('#endDate').val(params.endDate);
				this.pageNo = params.pageNo;
				this.keyWord = params.keyWord;
				//车型只需要显示当前品牌的所有车型
				this.loadTypeByBrandId(params.brandId);
			}
		});
	</script>

</html>
